<template>
  <div class="annularChart" :id="id"></div>
</template>
<script>
import echarts from "echarts";
export default {
  props: ["id", "list", "title"],
  data() {
    return {
      arr: [],
    };
  },
  watch: {
    list: function (val) {
      this.arr = val;
      this.getAnnular();
    },
  },
  methods: {
    getAnnular() {
      let than = this;
      let charts = echarts.init(document.querySelector(`#${this.id}`));
      charts.setOption({
        color: than.list.color,
        title: {
          text: than.title,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
         toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
        tooltip: {},
        xAxis: {
          type: "category",
        },
        yAxis: {},
        dataset: {
          source:than.list.source,
        },
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      },true);
      window.addEventListener("resize", function () {
        charts.resize();
      });
    },
  },
  mounted() {
    // this.getAnnular();
  },
  created() {
    //data和bar在这里循环，生成渲染所需要的对象
    // this.bar.forEach((val, i) => {
    //   this.data.forEach((item, index) => {
    //     if (i == index) {
    //       this.arr.push({
    //         value: item,
    //         name: val
    //       });
    //     }
    //   });
    // });
  },
};
</script>
<style scoped>
.annularChart {
  width: 900px;
  height: 637px;
  margin: 0 auto;
  background-color: #fff;
}
</style>
